<template>
  <div class="login-container light-theme">
    <div class="login-left">
      <div class="left-content">
        <div class="system-logo">
          <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
        </div>
        <h1 class="system-title">可视化勤务管理系统</h1>
        <p class="system-subtitle">科技强警 · 智慧勤务</p>
      </div>
    </div>
    <div class="login-right">
      <div class="login-form-wrapper">
        <h2 class="form-title">系统登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="form-item">
            <label for="username">用户名 / 警号</label>
            <div class="input-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
              <input
                type="text"
                id="username"
                v-model="loginForm.username"
                placeholder="请输入您的账号"
                required
                autofocus
              />
            </div>
          </div>
          <div class="form-item">
            <label for="password">密码</label>
            <div class="input-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
              <input
                :type="passwordVisible ? 'text' : 'password'"
                id="password"
                v-model="loginForm.password"
                placeholder="请输入您的密码"
                required
              />
              <div class="toggle-password" @click="togglePasswordVisibility">
                <svg v-if="!passwordVisible" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
              </div>
            </div>
          </div>

          <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>

          <button type="submit" class="login-button" :disabled="loading">
            <span v-if="!loading">登 录</span>
            <span v-else class="loading-spinner"></span>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; // 引入 axios 用于 API 调用

const router = useRouter();

const loginForm = reactive({
  username: '',
  password: '',
});

const loading = ref(false);
const errorMsg = ref('');
const passwordVisible = ref(false);

const togglePasswordVisibility = () => { passwordVisible.value = !passwordVisible.value; };

// 登录逻辑 - 替换为真正的 API 调用
const handleLogin = async () => {
  if (loading.value) return;
  if (!loginForm.username || !loginForm.password) {
    errorMsg.value = '账号和密码不能为空';
    return;
  }

  errorMsg.value = '';
  loading.value = true;

  try {
    // 发送登录请求到后端 API
    const response = await axios.post('http://localhost:8080/api/auth/login', {
      username: loginForm.username,
      password: loginForm.password
    });

    // 假设后端返回的 token 和用户信息存储在 response.data 中
    // const { token, role } = response.data;

    const role = response.data.data.role;
    const token = response.data.data.token;
    console.log(response)
    // 存储 token 到 localStorage 或其他存储方式
    localStorage.setItem('token', token);

    // 根据用户角色跳转到不同页面
    console.log(role)
    if (role === 'ADMIN') {
      router.push('/admin');
    } else if (role === 'COMMANDER') {
      router.push('/');
    } else {
      throw new Error('未知用户角色');
    }

  } catch (err: any) {
    errorMsg.value = err.response?.data?.message || '登录失败，请检查您的用户名和密码';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
@import '@/assets/styles/views/login.css';
/* 这里的样式是完整的，您可以直接使用 */
</style>
